 <template>
  <div class="app-container">
    <div class="flex">
        <div class="box_flex_1"> 
             <div class="padding10px" bindonce="ticket">
            <a class="question" >标题：{{form.title}}</a>
            <span class="text_overflow_hide" style="white-space:initial;max-height:20px;color:#9ea7b7">
                <span  class="ng-binding">{{form.addTime}}</span> | 
                <span  class="ng-binding">{{ form.answerPerson }}</span> 
            </span>
            </div>
        </div>
    </div>

    <el-form :model="form" ref="form" label-width="160px" v-loading="formLoading" :rules="rules">
      <el-form-item  prop="correct" required>
        <Editor ref="editor" v-model="form.detail" style="margin-top:40px;width: 60%;height: 100%" />
      </el-form-item> 
      <!-- <el-form-item label="班级名称："  prop="className" required>
        <el-input v-model="form.className"></el-input>
      </el-form-item>
      <el-form-item label="描述：" prop="description">
        <el-input v-model="form.description" ></el-input>
      </el-form-item> -->
      <div class="button">
        <el-form-item>
            <el-button style="width: 40%" type="primary" @click="submitForm">回复工单</el-button>
            <!-- <el-button @click="resetForm">重置</el-button> -->
            <!-- <el-button type="primary" @click="endForm">结束工单</el-button> -->
          </el-form-item>
      </div>
      
      <div class="box_flex2" >
          <li class="content-mine" v-for="(item,index) in this.talklist" :key="(item,index)" >
                <div v-if="item.userId==1" class="content-user">
                    <cite>
                        {{item.person}}
                        <i>{{item.addTime}}</i> 
                    </cite>
                   <!-- <a v-if="index==1" >客服</a> 
                   <a v-if="index==2" >用户</a>  -->
                  <!-- <img v-bind:src="item.productImage" alt=""> -->
                    <div class="content-text" >{{item.content}}</div>
                </div>  
                <div v-if="item.userId!=1" class="user">
                  <!-- <img :src="item.productImage" alt:style="height:200px" /> -->
                  <!-- <img src="../../../assets/logo/logo.png" > -->
                    <cite>
                        {{item.person}}
                        <i>{{item.addTime}}</i> 
                    </cite>
                   <!-- <a v-if="index==1" >客服</a> 
                   <a v-if="index==2" >用户</a>  -->
                  <!-- <img v-bind:src="item.productImage" alt=""> -->
                    <div class="text">{{item.content}}</div>
                </div>  
            </li>
      </div>
          <!-- <li class="content-mine" >{{item.mine }}
          <div class="content-user">
            <img src={item.avatar} on-click={() => bindClickUser(item)} />
            <cite>
              {leftName}
              <i>{tiem}</i> {rightName}
            </cite>
          </div>
          <div class="content-text" on-click={() => bindTalkEvent(item)}>
            {" "}
            {contentHtml}
          </div>
        </li> -->
    </el-form>
    
      
  </div>
</template>

<script>
import { getpage,endq,talkcreate,qdetail,talkdetail} from "@/api/question";
import Editor from '@/components/Editor';
export default {
  inject:['reload'],
   components: {
    Editor
  },
  data() {
    return {
      form: {
        id: null,
        title: '',
        detail: '',
        answerPerson: '',
        addTime:'',
        questionId: null,
        content:'',
        data:[]
      },
      formLoading: false,
      rules: {
         className: [
          { required: true, message: '请输入班级名称', trigger: 'blur' }
        ]
      },
      talklist:[],
      souce:"../../../assets/logo/logo.png",
      productList:[]
    }
  },
  created() {
    let id = this.$route.query.id
    let _this = this
    _this.form.questionId=id
    if (id && parseInt(id) !== 0) {
      _this.formLoading = true
      qdetail({ id: id}).then(re => {
        _this.form = re
        _this.form.detail=''
        _this.formLoading = false
      })
      talkdetail({ id: id}).then(re => {
        _this.form.data = re.data
        console.log(this.form.data)
        this.talklist=this.form.data
        console.log(this.talklist)
        _this.formLoading = false
      })
    }
  },
  methods: {
      submitForm () {
      let _this = this
     
      _this.form.questionId=_this.form.id
      _this.form.content=_this.form.detail
     
      talkcreate(this.form).then(data => {
            if (data.errno === 0) {
              _this.$message.success(data.errmsg)
              this.reload()
             
            } else {
              _this.$message.error(data.errmsg)
              
            }
          }).catch(e => {
            
          })
    },
    endForm () {
      let _this = this
     
      _this.form.questionId=_this.form.id
      _this.form.content=_this.form.detail
     
      endq(this.form).then(data => {
            if (data.errno === 0) {
              _this.$message.success(data.message)
              _this.$router.push('/upaper/history/index')
             
            } else {
              _this.$message.error(data.message)
              
            }
          }).catch(e => {
            
          })
    },
    resetForm () {
      this.reload()
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.button{
  margin-left: 90px;
  margin-top:80px;
}
.flex{     /*这是上面整体的大框 */
    margin-left: 80px;
    position: relative;
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -o-box;
}
.question{
  height: 550px;
  width: 50%;
  font-size: 30px;
  margin-left: 10%;
  margin-top: 20px;

 .title{
    font-size: 30px;
    //border: 1px dotted rgb(240, 32, 32);
    margin-left: 5%;
    margin-top: 20px;
  }
}
.box_flex_1 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
    display: block;
}
.padding10px {   /*这是上面的框title和2021-03-05 20:56:15 | Robot <   robot@ewei.com > | <客服界面 > < 刘> */
    margin-left: 5%;
    padding: 10px;
    
}
.text_overflow_hide {  /*2021-03-05 20:56:15 | Robot <   robot@ewei.com > | <客服界面 > < 刘> */
    word-break: keep-all;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-left: 10%;
    margin-top: 20px;
}
.box_flex2{
    margin-bottom: 200px;
    overflow-x: hidden;
    max-height: 1200px;
    transition-property: all;
    transition-duration: .5s;
    transition-timing-function: cubic-bezier(0,1,0.5,1);
    margin-top:50px;
    margin-left: 10%;
    width:60%;
    background: #77b2c4;
    // height: 200px;
    
}
.box_flex2.closed{
  max-height: 0;
}
.chat{
    margin-top: 10px;
    margin-left: 5%;
    //border: 1px solid #3615da;
}
      //  自己发送的消息
      .content-mine {
        width:98%;
        list-style-type: none;
        padding-left: 0;
        padding-right: 60px;
        margin-bottom: 20px;
        // 头像信息
        .content-user {
          margin-top: 20px;
          text-align: right;
          cite {
            
            left: auto;
            right: 620px;
            text-align: right;
            font-style: normal;
            font-family: verdana;
            font-size: 100%;
            color:rgba(0, 0, 0, 0.911);
            //border:2px solid #000;
            // margin-right: 10px;
            i {
              font-style: normal;
              padding-left: 0;
              padding-right: 15px
            }
          }
         //文字内容
        .content-text {
            
          text-align: center;
          line-height: 20px;
          border:1px solid #000;
          padding: 10px 40px;
          width: 98%;
          margin-top: 10px;
          border-radius: 25px;
          -moz-border-radius:25px;
          margin-left: 5%;
          background-color:  #9EEA6A;
          color: #000;
          a {
            margin-top: 10px;
            color: #000;
          }

        }
        }
  // 头像信息
        .user {
          margin-top: 20px;
          text-align: left;
          cite {
            right: auto;
            width: 620px;
            margin-left:20px;
            text-align: right;
            font-style: normal;
            font-family: verdana;
            font-size: 100%;
            color:rgba(0, 0, 0, 0.911);
            //border:2px solid #000;
            // margin-right: 10px;
            i {
              font-style: normal;
              padding-left: 0;
              padding-right: 15px
            }
          }
         //文字内容
        .text {
          text-align: center;
          border:1px solid #000;
          line-height: 20px;
          padding: 10px 40px;
          width: 98%;
          margin-top: 10px;
          border-radius: 25px;
          -moz-border-radius:25px;
          margin-left: 5%;
          background-color:  #ecf3e7;
          color: #000;
          a {
            margin-top: 10px;
            color: #000;
          }

        }
        }
       

      }
</style>